<template>
	<view class="container">
		<view  class="swiper-list">
			<swiper class="swiper" circular @change="swiperChange" :autoplay="true" :interval="2000"	:duration="500">
				<swiper-item v-for="(item,index) in info.pics" :key="index">
					<view >
						<image :src="item" class="swiper-image" ></image>
					</view>
				</swiper-item>
			
			</swiper>
			<view class="swiper-dots" v-if="info.pics&&info.pics.length>0">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		
		<view class="bg-white" style="margin-top: -30rpx;position: relative;">
			<view class="course-name">{{info.title}}</view>
			<view class="two-col">
				<view class="color-red" style="font-size: 32rpx;font-weight: 600;">{{info.score}}积分</view>
				<view class="color-hui">价值¥{{info.worth?info.worth:''}}</view>
			</view>
			
			<view class="two-col-w" v-for="(item,index) in info.reflex" :key="index">
				<view class="w-120">{{index}}</view>
				<view>{{item}}</view>
			</view>
		</view>
		
		
		<view class="bg-white">
			<view style="display: flex;">
				<view style="flex: 1;" class="course-name">公益支持单位</view>
				<view @click="toShop(info.shop_info.id,info.shop_info.name)" class="entrance">进店 ></view>
			</view>
			
			<view>
				<view class="w-160 float-l margin-t-20">
					<image class="logo" :src="info.shop_info.logo"></image>
				</view>
				<view class="float-l margin-l-30 margin-t-20">
					<view class="course-name">{{info.shop_info.name}}</view>
					<view style="margin-top: 30rpx;">
						<view class="text-el" @click="toLocation()">{{info.shop_info.address}}<text  class="cell-icon yticon icon-you" style="font-size: 14px;"></text></view>
						<view class="phone" @click="openDial()">
							<text class="cell-icon yticon icon-phone"></text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="bg-white">
			<view class="course-name">使用方法</view>
			<view class="margin-t-20" style="text-align: center;"><image mode="widthFix"  src="/static/temp/method.png"></image></view>
		</view>
		<view class="bg-white" style="margin-bottom: 180rpx;">
			<view class="course-name">兑换规则</view>
			<view class="margin-t-20">
				<rich-text :nodes="info.rule"></rich-text>
			</view>
		</view>	
		
		<view class="bottom-btn" >
			<view  class="btn" v-if="userScore>=info.score&&info.status==1" @click="createOrder()">立即兑换</view>
			<view  class="btn" v-if="info.status==0" style="background: #B2B2B2;">商品已下架</view>
			<view  class="btn" v-if="userScore<info.score&&info.status==1" style="background: rgba(237,112,59,0.2);color: #C89883;">积分不足</view>
		</view>
		
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="makePhone()" class="pop-child" style="margin-bottom: 10rpx;">呼叫 {{info.shop_info.contact}}</view>
				<view @click="cancelPop()" class="pop-child">取消</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		
		data() {
			return {
				id:0,
				info:{},
				order:{},
				swiperCurrent: 0,
				swiperLength: 0,
				userScore:0
			}
		},
		
		onLoad(option) {
			this.id =option.id
			// this.id =2
			this.getDetail();
		},
		onShow(){
			if(this.hasLogin){
				this.userCenter();
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			toLocation(){
				
				let that =this;
				uni.openLocation({
					latitude:that.info.shop_info.latitude*1,
					longitude:that.info.shop_info.longitude*1,
					name:that.info.shop_info.address,
					scale:16
				})
			},
			async getDetail() {
				let params = {
					id: this.id
				}
				let data = await Api.apiCall('get', Api.apiName.score_goods_detail, params, true);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				this.swiperLength=this.info.pics?this.info.pics.length:0;
			},
			async createOrder() {
				let that =this;
				uni.showModal({
					title:'确认兑换该商品吗?',
					content:'兑换后，积分不可退，请即时到店消费',
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {
				    			goods_id: that.id
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.create_goods_order, params);
							that.disbaoming =false;
							if (!data) { //出错时
								return;
							}
							that.$api.msg(`兑换成功`,2500);
				
							
				    	}
				    }
				});				
			},
			navTo(url,t=1){
				if(t==2&&!this.hasLogin){
					uni.navigateTo({
						url:'/pages/public/wxLogin'
					})
					return;
				}
				uni.navigateTo({
					url:url
				})
				
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.shop_info.contact
				})
			},
			openDial(){
				this.$refs.popup.open('bottom')
			},
			cancelPop(){
				this.$refs.popup.close();
			},
		
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			toShop(id,name){
				uni.navigateTo({
					url:'/pages/shop/list?id='+id+'&name='+name
				})
			},
			async userCenter(){
				let data = await Api.apiCall('get', Api.apiName.user_main, {}, true);
				if (!data || data.code != 0) {
					return;
				}
				this.userScore=data.data.score;
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.container {
		height: 100vh;
		overflow: auto;
	}
	.swiper-list{
		height: 646rpx;
		position: relative;
	}
	.swiper{
		height: 100%;
	}
	.swiper-image{
		height: 646rpx;
		width: 100%;
	}
	.bg-white{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 14rpx 30rpx;
		font-size: 24rpx;
	}
	.entrance{
		padding: 10rpx 20rpx;
		border: 1px solid #999999;
		border-radius: 30rpx;
	}
	.two-col{
		display: flex;
		padding: 20rpx 0rpx;
		align-items: center;
	}
	.two-col-w{
		display: flex;
		padding: 10rpx 0rpx;
	}
	.course-name{
		font-size: 32rpx;
		font-weight: 600;
	}
	.w-120{
		width: 120rpx;
		// font-weight: 600;
	}
	.border-red{
		border: 1px solid red;
	}
	.padding-4{
		padding: 4rpx 16rpx;
	}
	.m-left-20{
		margin-left: 20rpx;
	}
	.color-hui{
		color:#C6C5C5;
		font-size: 26rpx;
		margin-left: 20rpx;
		text-decoration: line-through;
	}
	.color-red{
		color:#FF0000;
	}
	.price{
		justify-content: center;
		align-items: center;
	}
	.logo{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		border: 1px solid #f3f3f3;
	}
	.w-160{
		width: 160rpx;
	}
	.float-l{
		float: left;
	}
	.margin-t-20{
		margin-top: 20rpx;
	}
	.margin-l-30{
		margin-left: 30rpx;
	}
	.text-el{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* 显示两行文本 */
		-webkit-line-clamp: 2;
		float: left;
		width: 330rpx;
	}
	.text-el{
		text-overflow: ellipsis;
		/* 必须添加以下两个属性 */
		white-space: normal;
	}
	.phone{
		float: right;
		border-radius: 5px;
		width: 24px;
		height: 24px;
		background: #E7E6E6;
		display: flex;
		margin-left: 30rpx;
	}	
	.section{
		border: 1px solid #0191FF;
		padding: 4rpx;
		text-align: center;
		color: #0191FF;
	}
	
	.bottom-btn{
		position: absolute;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		text-align: center;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.5);
	}
	.btn{
		padding: 20rpx;
		width: 90%;
		margin: 26rpx auto;
		border-radius: 30rpx;
		background: #ED703B;
		color:#FFFFFF;
	}
	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color:rgba(153,153,153,0.1);
	}

	.pop-child{
		height: 100rpx;
		background: #FFFFFF;
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	.swiper-dots{
		position: absolute;
		bottom: 60rpx;
		right: 60rpx;
		background: rgba(0,0,0,0.4);
		color:#FFFFFF;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
</style>